// 由于webpack是基于node构建的，所以 webpack的配置文件中，任何合法的node代码都是支持的
var path = require('path')
// 在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到这个页面底部
// 如果要配置插件，需要在导出的这个对象中挂在一个plugins 节点
var htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin');

const webpack = require('webpack')

// 当以命令形式运行 webpack 或 webpack-dev-server的时候，工具会发现我们并没有提供 要打包的文件入口和出口文件
// 此时，会检查项目根目录中的配置文件，并读取这个文件，拿到导出的配置对象，然后根据这个对象，进行打包构建
module.exports = {
    entry:path.join(__dirname,'./src/main.js'),//入口文件
    output:{//出口文件
        path:path.join(__dirname,'./dist'),//输出路径
        filename:'boundle.js'//指定输出文件的名称
    },
    plugins:[//所有wenpack插件的配置节点
        new VueLoaderPlugin(),
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),//指定模板文件路径
            filename:'index.html',//设置生成的页面名称
        }),
        new webpack.ProvidePlugin({
            $:'jquery',
            jQuery:'jquery'
        })
    ],
    module:{//配置所有第三方loader模块的
        rules:[//第三方文件的匹配规则
            {test:/\.css$/,use:['style-loader','css-loader'] },//处理css文件的loader
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},//处理less文件的loader}
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },//处理sass文件的loader
            { test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=297753&name=[hash:8]-[name].[ext]'},//处理图片路径的loader
            //limit给定的值是图片的大小 单位是 byte ，如果我们引用的图片大于或等于给定的limit值则不会被传为
            // base64格式的字符串，如果 图片小于给定的limit值，则会被转为base64
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader 
            // { test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},//处理字体文件的loader 

            { test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//这是配置Babel来转换高级语法 

            { test:/\.vue$/,use:'vue-loader'}//这是处理 .vue文件的loader
        ]

    }
}

